<template>
   <div class="yearBox">
      <div class="title">
         <p>年度游客量对比</p>
         <img src="../../images/dataScreen-title.png" alt="">
      </div>
      <!-- 图形图表的容器 -->
      <div class="charts" ref="charts"></div>
   </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
let charts = ref()
onMounted(() => {
   let mycharts = echarts.init(charts.value)
   mycharts.setOption({
      title: {
         text: '游客量对比',
         left: 'center',
         textStyle: {
            color: 'skyblue'
         }
      },
      xAxis: {
         type: 'category'
      },
      yAxis: {
         show: false
      },
      grid: {
         left: 30,
         top: 30,
         bottom: 20,
         right: 20
      },
      series: {
         type: 'scatter',
         data: [23, 422, 142, 252, 353, 64, 185, 332, 23, 253, 53, 224, 324, 42],
         // 标记图形设置
         symbol: 'circle',
         symbolSize: 14
      },
      tooltip: {
         trigger: 'axis'
      },
      // 图文标签
      label: {
         show: true,
         position: 'top',
         color: 'yellowgreen'
      },
      // 散点图标记的颜色
      itemStyle: {
         color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
               offset: 0, color: 'skyblue' // 0% 处的颜色
            }, {
               offset: 1, color: 'gray' // 100% 处的颜色
            }],
            global: false // 缺省为 false
         },
      }
   })
})
</script>

<style lang="scss" scoped>
.yearBox {
   background: url(../../images/dataScreen-main-rc.png) no-repeat;
   background-size: cover;

   .title {
      p {
         color: white;
         font-size: 20px;
      }
   }

   .charts {
      height: 270px;
   }
}
</style>